<template>
  <a-modal :open="open" width="1400px" title="对账信息" centered :footer="false" @cancel="onCancel">
    <div class="flex justify-between">
      <BaseTitle title="医药医疗机构与中心端数里一致，金额不一致" />
      <BaseExport
        type="医保"
        name="医药医疗机构与中心端数里一致，金额不一致"
        code="000817"
        :search-params="{ compareList: formatResultThree(tableData?.compareEqualList) }"
        >导出</BaseExport
      >
    </div>
    <BaseTable :data-source="tableData?.compareEqualList" :loading="loading" column-code="000817" :height="200" :pagination="pagination" :scroll="{ x: 2200 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'dzjg'">
          {{ reconciliation[record.dzjg] }}
        </template>
      </template>
    </BaseTable>
    <div class="flex justify-between mt-2">
      <BaseTitle title="医药医疗机构比中心端明细多记录" />
      <BaseExport
        type="医保"
        name="医药医疗机构比中心端明细多记录"
        code="000817"
        :search-params="{ compareList: formatResultThree(tableData?.compareMoreList) }"
        >导出</BaseExport
      >
    </div>
    <BaseTable :data-source="tableData?.compareMoreList" :loading="loading" column-code="000817" :height="200" :pagination="pagination" :scroll="{ x: 2200 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'dzjg'">
          {{ reconciliation[record.dzjg] }}
        </template>
      </template>
    </BaseTable>
    <div class="flex justify-between mt-2">
      <BaseTitle title="医药医疗机构比中心端明细少记录" />
      <BaseExport
        type="医保"
        name="医药医疗机构比中心端明细少记录"
        code="000817"
        :search-params="{ compareList: formatResultThree(tableData?.compareLessList) }"
        >导出</BaseExport
      >
    </div>
    <BaseTable :data-source="tableData?.compareLessList" :loading="loading" column-code="000817" :height="200" :pagination="pagination" :scroll="{ x: 2200 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'dzjg'">
          {{ reconciliation[record.dzjg] }}
        </template>
      </template>
    </BaseTable>
    <div class="flex justify-end mt-2">
      <a-button @click="onCancel"> 关闭 </a-button>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'

const emit = defineEmits(['update:open', 'success'])
const loading = ref(false)
const formState = ref({})
const tableData = ref({})
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const reconciliation = ref(['平', '不平'])
const getData = async () => {
  loading.value = true
  const res = await post('/insureReconciliation/settlementInfoDetailDz', {
    ...formState.value
  })
  loading.value = false
  if (res.code === 0) {
    tableData.value = res.data
  } else {
    message.error(res.msg)
  }
}
const formatResultThree = (val) => {
  if (val && val.length > 0) {
    return val.filter((item) => {
      return item.dzjg === '1'
    })
  } else {
    return []
  }
}

const onCancel = () => {
  emit('update:open', false)
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = {
        ...props.rowData
      }
      getData()
    }
  },
  { immediate: true }
)
</script>
<style lang="less" scoped></style>
